<template>
	<view class="pro-body">
			<view class="promenu-item">
			    <view class="promenu-first">
			        <i class="iconfont icon-mingpan"></i> 盲盘
			    </view>
			    
			    <view class="Panel_body">
			        <button @click="endStocking" class="centerBtn">
			            <i class="iconfont icon-complete"></i> 完成盘点
			        </button>
			    </view>
			</view>
			<view class="container">
			    <view class="sechoice">
			        仓库:{{stockName}}
			    </view>	
				<view class="sechcang">
					仓位:{{locationNo}}
				</view>
			</view>
			
			<view class="procentainerlist">
				<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" @selection-change="selectionChange">
					<uni-tr>
						<uni-th width="100px" align="center" background-color>
							<view class="wlnamet">物料名称</view>
							</uni-th>
						
						<uni-th width="110px" align="center">
							<view class="pdnumber">盘点数</view>
						</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in materialList" :key="index">
						<uni-td>
							<view class="wl-container">
								<view class="wlnumber">{{ item.fmaterialname }}</view>
							</view>
						</uni-td>
						
						<uni-td  align="center">
							 <input v-model="item.finventorycount" class="pdnumber" type="number"
							  @input="inputClick(item)" placeholder="请输入盘点数量" />
						</uni-td>
					</uni-tr>
					</uni-table>
				</view>
			<!--  底部按钮 -->
			<view class="footerPanel">
				<view class="footerPanel_body">
					<button @click="addMaterial" class="footerBtn scan" type="primary"><i></i>新增盘盈
					</button>
				</view>
			</view>
			
	</view>
	
</template>

<script>
	import {getStocktakingDetail,
	endStocktaking} from '@/utils/api.js'
	export default {
	    data() {
	        return {
				loading: false,
				materialList: [],
				FPRDORGID : '',
				stockNo : '',
				locationNo :'',
				stockName : ''
	        };
	    },
		methods : {
			//新增盘盈
			addMaterial(){
				let param = {
					FPRDORGID : this.FPRDORGID,
					stockNo : this.stockNo,
					stockName : this.stockName,
					locationNo : this.locationNo,
					billNo : this.materialList[0].fbillno
				}
				this.$refs.replacePop.open(param)
			},
			/**
			 * 输入框校验只允许是正整数
			 */
			inputClick(e){
				const v = e.replaceCount
				const zero = /^(0{2,})|[^0-9]/g
				let final = 0
				if (!v) {
				  final = 0
				} else {
				  final = v.toString().replace(zero, (v) => {
					return 0
				  })
						
				  if (final.split('')[0] * 1 === 0) {
					final = final.slice(1) - 0 || 0
				  }
				}
				this.$nextTick(() => {
				 e.replaceCount = final.toString() || '0'
				})
			},
			//完成盘点
			endStocking(){
				uni.showLoading({
					title:'正在上传数据请稍等',
					mask:true
				})
				endStocktaking({data : this.materialList}).then(res =>{
					if (res.data.status == 200){
						uni.showToast({
							title:'上传完成'
						})
						setTimeout(() =>{
							uni.navigateBack({
								delta:1,
								success() {
									uni.$emit('update',{msg:'页面刷新'})
								}
							})
						},1000)
					}
				})
			},
			
			initData(){
				this.getStockTakingDetail()
				
			},
			/**
			 * 获取仓位向下的库存信息
			 */
			getStockTakingDetail(){
				getStocktakingDetail({FOrgId : this.FPRDORGID,FStockId : this.stockNo,FLocationId : this.locationNo}).then(res => {
					this.materialList = res.data
				})
			},
		},
		onLoad(e) {
			this.FPRDORGID = e.FPRDORGID
			this.stockNo = e.stockNo
			this.locationNo = e.locationNo
			this.stockName = e.stockName
			this.initData()
		}
	};
	
	
</script>

<style lang="scss" scoped>
	/* 引入公共样式 */
	@import "../../static/css/common";
	
	/* 页面主体样式 */
	.pro-body {
	    background-color: #ffffff;
	}
	
	/* 容器样式 */
	.promenu-item {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    height: 40px;
	    font-size: 26px; /* 增大字体大小 */
	    border-bottom: 2px solid #c1c1c1; /* 添加水平分割线 */
	}
	
	/* 明盘样式 */
	.promenu-first {
	    display: flex;
	    align-items: center;
	    height: 40px;
	    font-size: 26px; /* 增大字体大小 */
	}
	
	.promenu-first .iconfont {
	    margin-right: 5px;
	}
	
	/* 数据列表样式 */
	.data-list {
	    display: flex;
	    align-items: center;
	    height: 40px;
	    font-size: 26px; /* 增大字体大小 */
	    justify-content: center;
	    flex: 1; /* 使数据列表占据剩余空间 */
	}
	
	.data-list .iconfont {
	    margin-right: 5px;
	}
	
	/* 按钮样式 */
	.Panel_body {
	    display: flex;
	    align-items: center;
	}
	
	.centerBtn {
	    border: none;
	    background-color: #9dec00;
	    color: #000000;
	    padding: 10px 20px;
	    font-size: 18px;
	    border-radius: 5px;
	    display: flex;
	    align-items: center;
	}
	
	.centerBtn .iconfont {
	    margin-right: 5px;
	}
	.pilBtn {
		width: 100px;
	    border: none;
	    background-color: #00f9f9;
	    color: #000000;
	    padding: 10px 20px;
	    font-size: 16px;
	    border-radius: 5px;
	    display: flex;
	    align-items: center;
		justify-content: center; /* 水平居中对齐 */
		text-align: center; /* 文字居中显示 */
	}
	/* 选择器容器样式 */
	.container {
	    display: flex;
	    align-items: center; /* 垂直居中对齐 */
	    justify-content: space-between; /* 水平均匀分布 */
	}
	
	
	/* 表格单元格样式 */
	uni-td {
	        display: flex;
	        align-items: center; /* 垂直居中对齐 */
	        padding: 10px;
	        border: 1px solid #ddd;
	}
	
	/* 物料容器样式 */
	.wl-container {
	    display: flex;
	    flex-direction: column; /* 垂直排列子元素 */
	    align-items: flex-start; /* 左对齐 */
	}
	
	/* 物料编号样式 */
	.wlnumber {
	   font-size: 18px;
	   color: #000000;
	}
	
	/* 物料名称样式 */
	.wlname {
	    font-size: 14px;
	    color: #393939;
	}

	.pdnumber {
		
		font-size: 18px;
		color: #000000;
	}

	.wlnamet{
		font-size: 18px;
		color: #000000;
	}
	
</style>
